<% @page_title = "Remove Security Key" %>

<%== part("components/page_header", title: "My Account") %>

<main>
  <div class="max-w-screen-xl pb-6 lg:pb-16">
    <div class="overflow-hidden rounded-lg bg-white shadow">
      <div class="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-x lg:divide-y-0">
        <%== render("account/submenu") %>
        <div class="divide-y divide-gray-200 lg:col-span-8 xl:col-span-9 2xl:col-span-10 pb-10">
          <div class="px-4 py-6 sm:p-6 lg:pb-8 space-y-4">
            <h2 class="text-lg font-medium leading-6 text-gray-900">Remove Security Key</h2>
            <form action="/<%= rodauth.webauthn_remove_route %>" role="form" method="POST" id="webauthn-remove-form">
              <%== rodauth.webauthn_remove_additional_form_tags %>
              <%== rodauth.csrf_tag("/" + rodauth.webauthn_remove_route) %>
              <div class="mt-6 grid grid-cols-6 gap-6">
                <% if rodauth.two_factor_modifications_require_password? %>
                  <div class="col-span-6 sm:col-span-3 xl:col-span-2">
                    <%== render("components/rodauth/password_field") %>
                  </div>
                <% end %>
                <div class="col-span-6 sm:col-span-6">
                  <fieldset>
                    <div class="space-y-5">
                      <% (usage = DB[rodauth.webauthn_keys_table]
                          .where(rodauth.webauthn_keys_account_id_column => rodauth.session_value)
                          .select_hash(rodauth.webauthn_keys_webauthn_id_column, [rodauth.webauthn_keys_last_use_column, :name])
                        ).map do |id, (last_use, name)| %>
                        <div class="relative flex items-start">
                          <div class="flex h-6 items-center">
                            <input
                              id="webauthn-remove-<%= id %>"
                              name="<%= rodauth.webauthn_remove_param %>"
                              value="<%= id %>"
                              type="radio"
                              class="h-4 w-4 border-gray-300 text-orange-600 focus:ring-orange-600"
                              required
                            >
                          </div>
                          <div class="ml-3 text-sm leading-6">
                            <label for="webauthn-remove-<%= id %>" class="font-medium text-gray-900"><%= name %></label>
                            <span id="webauthn-remove-<%= id %>-description" class="text-gray-500">
                              (Last Usage:
                              <%= last_use.strftime("%F %T") %>)
                            </span>
                          </div>
                        </div>
                      <% end %>
                    </div>
                  </fieldset>
                  <% if error = rodauth.field_error(rodauth.webauthn_remove_param) %>
                    <p class="mt-2 text-sm text-red-600 leading-6" id="<%= rodauth.webauthn_remove_param %>-error"><%= error %></p>
                  <% end %>
                </div>
                <div class="col-span-6">
                  <%== part("components/form/submit_button", text: rodauth.webauthn_remove_button) %>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
